<template>
  <!--工作台卡片详情工序进度条组件-->
  <div>
    <el-steps>
      <el-step
        v-for="(item, index) in proccessList"
        :key="index"
        :status="getStepStatus(item)">
        <div slot="title" class="step_tooltip">
          <el-tooltip class="item" effect="dark" :open-delay="openDelay" placement="top">
            <div slot="content">
              <p>{{item.sort}}: {{item.workstageName}}</p>
              <p>工序进度: {{item.workstageProcessStatusLabel}}</p>
            </div>
            <el-button></el-button>
          </el-tooltip>
        </div>
        <p slot="description" class="step_current">
          <span class="current_word">{{item.workstageName === workstageName ? '当前工序': ''}}</span>
          <span v-if="item.workstageName !== workstageName" class="skip_word">{{item.allowSkipToStartValue === 'True' ? '跨工序': ''}}</span>
        </p>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: 'WorkstageSteps',
  props: {
    proccessList: Array, // 工序进度条列表
    workstageName: String, // 当前工序名称
  },
  methods: {
    // 获取进度条状态
    getStepStatus(item) {
      const status = item.workstageProcessStatusValue || ''
      switch (status) {
        case 'Finished' :
          return 'success'
        case 'Started' :
          return 'process'
        case 'ToBeStarted':
          return 'wait'
        case 'NotArrive':
          return 'wait'
      }
      if (status === 'Finished' && item.allowSkipToStartValue === 'True') return 'finish'
      if (status === 'Finished' && item.workstageName === this.workstageName) return 'finish'
    },
  }
}
</script>

<style lang="less">
  .el-step.is-horizontal{
    position: relative;
    cursor: pointer;
    .el-step__line{
      top:20px!important;
      height: 4px!important;
    }
    .el-step__line-inner{
      border-width: 2px!important;
    }
    .el-step__icon{
      width: 40px;
      height: 40px;
    }
    // 已完成工序
    .el-step__head.is-success{
      color: #67c23a;
      border-color: #00a949!important;
      .el-step__icon{
        background-color: #00a949;
        color:#fff!important;
      }
      .el-step__line{
        background-color: #00a949;
      }
    }
    .el-step__description.is-success {
      .step_current{
        color:#67c23a;
      }
    }
    // 已开工工序
    .el-step__head.is-process{
      color: #00b4ff;
      border-color: #00b4ff!important;
      .el-step__icon{
        background-color: #00b4ff;
        color:#fff!important;
      }
      .el-step__line{
        background-color: #dbe1e7;
      }
    }
    .el-step__description.is-process {
      .step_current{
        color:#00b4ff;
      }
    }
    // 未开工和未到达工序
    .el-step__head.is-wait{
      color: #00b4ff;
      border-color: #dbe1e7!important;
      .el-step__icon{
        background-color: #fff;
        color:#a1b1c1!important;
      }
      .el-step__line{
        background-color: #dbe1e7;
      }
    }
    .el-step__description.is-wait {
      .step_current{
        color:#333;
      }
    }
    // 已完工的当前工序和跨工序
    .el-step__head.is-finish{
      color: #67c23a;
      border-color: #00a949!important;
      .el-step__icon{
        background-color: #00a949;
        color:#fff!important;
      }
      .el-step__line{
        background-color: #00a949;
      }
    }
    .el-step__description.is-finish {
      .step_current{
        color:#67c23a;
      }
    }
    .step_tooltip{
      left: 0;
      bottom: 0;
      z-index:999;
      width: 60px;
      height: 100%;
      margin-left: -10px;
      position: absolute;
      background: transparent;
      .el-button{
        width: 100%;
        height: 100%;
        border:none;
        background-color: transparent;
        padding: 0;
      }
    }
    .step_current{
      padding-top: 10px;
      .current_word{
        display: inline-block;
        margin-left: -3px;
      }
      .skip_word{
        display: inline-block;
        margin-left: 1px;
      }
    }
    &:hover{
      .step_tooltip{
        display: block;
      }
    }
  }
</style>
